import './Scss/EnvironmentNoise.scss'
import { Gauge } from '@ant-design/plots'
import { useState, useEffect } from 'react'

export const EnvironmentNoise001 = ({ data }) => {
    const [parameter, setParameter] = useState()
    const [DataList] = useState([
        { uuid: '1', title: '噪音较低', color: '#1FB26C' },
        { uuid: '2', title: '噪音正常', color: '#FFCB4F' },
        { uuid: '3', title: '噪音较大', color: '#F3664A' },
    ])

    useEffect(() => {
        let parameter = {
            autoFit: false,
            width: 250,
            height: 200,
            percent: data?.noise / 120 || 0,
            type: 'meter',
            innerRadius: 0.76,
            range: { ticks: [0, 1 / 3, 2 / 3, 1], color: ['#30BF78', '#FAAD14', '#F4664A'] },
            axis: { label: { style: { fill: '#44AFCA' }, formatter: v => Number(v) * 120 }, subTickLine: { count: 5 } },
            indicator: { pointer: { style: { stroke: '#fff' } }, pin: { style: { stroke: '#ccc' } } },
            statistic: {
                title: { style: { fontSize: '36px', color: '#fff' }, formatter: () => `${data?.noise || 0}db` },
                content: { offsetY: 30, style: { fontSize: '18px', color: '#fff' }, formatter: () => '噪音正常' },
            },
        }
        setParameter(parameter)
    }, [data])

    return (
        <div className="EnvironmentNoise001">
            <div>
                {DataList.map(({ uuid, title, color }) => (
                    <div key={uuid}>
                        <div style={{ background: color }} />
                        <div>{title}</div>
                    </div>
                ))}
            </div>
            {parameter && <Gauge {...parameter} />}
        </div>
    )
}
